<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-warning" style="font-size: 14px">
              <h1 style="font-size: 40px;">滴滴打车后台管理系统</h1>
        </blockquote>

        <hr />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :sm="16" :lg="8" >
        <h2>周订单量</h2>
        <p class="picture">
          <el-date-picker
            v-model="weekValue"
            type="week"
            format="yyyy 第 WW 周"
            :first-day-of-week="1"
            placeholder="选择周"
          >
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="WeekQuery">查询</el-button>  
        </p>
        <h2>月订单量</h2>
        <p class="picture">
            <el-date-picker
                v-model="monthValue"
                type="month"
                placeholder="选择月"
            >
            </el-date-picker>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="MonthlyQuery">查询</el-button>  
        </p>
        <h2>年订单量</h2>
        <p class="picture">
          <el-date-picker
              v-model="yearValue"
              type="year"
              placeholder="选择年"
          >
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="AnnualOrderQuery">查询</el-button>  
        </p>      
        
      </el-col>

      <el-col :sm="32" :lg="16" >
        <!-- 图像 -->
      <div class="profit-container">
        <div v-if="!echartsData.xAxis.length ||!echartsData.yAxis.length ||!echartsData.title">
            <p style="font-size: 30px;">暂无数据，请选择时间查询。</p>
        </div>
        <Echarts v-else :echartsData="echartsData" :chartStyle="chartStyle" />
        <!-- <Echarts  :echartsData="echartsData" :chartStyle="chartStyle" />  -->
      </div>
       
      
      </el-col>
    </el-row>
    <el-divider />
  </div>
</template>

<script>
  import Echarts from '@/views/didi/components/echarts/index.vue';
  import {getWeeklyOrder,getMonthlyOrder,getAnnualOrder} from "@/api/didi/data.js";
  import { formatDate ,getWeekRange} from '@/api/didi/utils/dateUtils';
export default {
  components: {
      Echarts
    },
  data() {
    return {
      weekValue: '',
      monthValue:'',
      yearValue:'',
      monthTime:"",
      yearTime:"",
      week:{
          startOfWeek: '',
          endOfWeek: ''
      },
      data:{
          year: '',
          month: '',
      },
      chartStyle: {
          width: '1500px',
          height: '650px',
          border: '1px solid black',
          padding: '20px'
      },
      echartsData:{
            xAxis:[],
            yAxis:[],
            title:"",
            xName:"时间",
            yName:"订单量",
            explain:""
        },
          
    };
  },
  mounted() {
    // 获取当前日期
    const now = new Date();
    // 设置给 v-model 绑定的数据变量
    this.yearValue = now;

    this.AnnualOrderQuery();
  },
  methods: {
    //年查询
    AnnualOrderQuery(){
      if (!this.yearValue) {
          this.$message.error('请选择一个年份');
          return;
      }
      this.yearTime = this.formattedDate(this.yearValue);
        const [year, month] = this.yearTime.split('-');
        this.data.year = year;
        this.data.month = month;
        getAnnualOrder(this.data).then(response => {
          if(response.rows.length>0){
                this.echartsData.xAxis = response.rows.map(item => item.newCount);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const total = response.rows.reduce((acc, item) => {
                    // 将 item.newCount 转换为数值类型
                    const countValue = parseFloat(item.newCount);
                    return acc + countValue;
                }, 0)
                this.echartsData.explain="总订单量: "+total+"个"
                this.echartsData.title = year+" 年的订单量"
            }else{
              this.$message.error(year+"年暂无数据,请另选时间");
            }
        })
    },
    //月查询
    MonthlyQuery(){
      if (!this.monthValue) {
          this.$message.error('请选择一个月份');
          return;
      }
      this.monthTime = this.formattedDate(this.monthValue);
        const [year, month] = this.monthTime.split('-');
        this.data.year = year;
        this.data.month = month;
        getMonthlyOrder(this.data).then(response => {
          if(response.rows.length>0){
                this.echartsData.xAxis = response.rows.map(item => item.newCount);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const total = response.rows.reduce((acc, item) => {
                    // 将 item.newCount 转换为数值类型
                    const countValue = parseFloat(item.newCount);
                    return acc + countValue;
                }, 0)
                this.echartsData.explain="总订单量: "+total+"个"
                this.echartsData.title = this.monthTime+" 的订单量"
            }else{
              this.$message.error(this.monthTime+"暂无数据,请另选时间");
            }
        
        })
    },
    //周查询
    WeekQuery(){
      if (!this.weekValue) {
          this.$message.error('请选择一个星期');
          return;
        }
        const year = this.weekValue.getFullYear();
        const weekNumber = this.getWeekNumber(this.weekValue);
      const { start, end } = getWeekRange(this.weekValue);
      this.week.startOfWeek = start;
      this.week.endOfWeek = end;
      getWeeklyOrder(this.week).then(response => {  
        if(response.rows.length>0){
                this.echartsData.xAxis = response.rows.map(item => item.newCount);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const total = response.rows.reduce((acc, item) => {
                    // 将 item.newCount 转换为数值类型
                    const countValue = parseFloat(item.newCount);
                    return acc + countValue;
                }, 0)
                this.echartsData.explain="总订单量: "+total+"个"
                this.echartsData.title = year+"年第"+weekNumber+"周的订单量"
               
            }else{
              this.$message.error(year+"年第"+weekNumber+"周暂无数据,请另选时间");
            }
      
     })
    },
    getWeekNumber(date) {
      const target = new Date(date);
      const yearStart = new Date(target.getFullYear(), 0, 1);
      // 计算一年中第一个星期四的日期
      const firstThursday = new Date(yearStart);
      firstThursday.setDate(1 + ((4 - yearStart.getDay()) + 7) % 7);
      // 计算目标日期与第一个星期四的天数差
      const diff = target - firstThursday;
      const days = Math.floor(diff / (24 * 60 * 60 * 1000));
      // 计算周数
      return Math.ceil((days + 7) / 7);
    },
    // getWeekNumber(date) {
    //   const target = new Date(date.valueOf());
    //   const firstDayOfYear = new Date(target.getFullYear(), 0, 1);
    //   const dayOfWeek = firstDayOfYear.getDay();
    //   const millisecondsPerDay = 86400000;

    //   target.setDate(target.getDate() + 4 - (dayOfWeek || 7));
    //   const firstThursday = target.valueOf();
    //   target.setMonth(0, 1);
    //   if (target.getDay() !== 4) {
    //     target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
    //   }
    //   return Math.ceil((firstThursday - target) / (7 * millisecondsPerDay));
    // },
    //日期转化
    formattedDate(date) {
        return formatDate(date);
      },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.profit-container {
    position: relative;
    left: -15%;
    /* transform: translate(-30%, 0%); */
}
.picture{
  margin-bottom: 70px;
}
</style>

